/* eslint-disable react/jsx-handler-names */
/**
 * 产品和组合联动 业务组件
 * by zhangxinyue
 * create 2020-08-12
 */
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Row, Col } from 'antd';
import ProductGroupTreeC from './productGroupTreeC';
import ProductListC from './productListC';

class ProductGroupSepC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: ['产品', '组合'],
    initialValue: undefined,
    placeholder: ['请选择产品', '请选择组合'],
    helper: '',
    productOnChange: () => {}, // 产品选择变更事件
    groupOnChange: () => {}, // 组合选择变更事件
    onRef: () => {}, // 本组件的引用
    width: '100%',
    multipleGroup: true, // 默认组合支持多选
    rules: [undefined, undefined], // 默认无校验规则
    allowClear: true, // 默认可删除
    authority: 'read', // 默认是读权限
    disabled: false, // 默认不禁用
    direction: 'row', // 默认是横向布局
    maatApi: false, // 默认什么环境下就用什么该环境的产品和组合
    exist: undefined, // 默认是获取存续期和到期的所有产品
    labalWrap: false,
    workStation: false,
    initChangeFlag: false,
  };

  constructor(props) {
    super(props);

    this.state = {
      productId: props.initialValue ? props.initialValue[0] : undefined, // 当前选择的产品ID
      // eslint-disable-next-line react/no-unused-state
      changeValues: undefined, // 手动赋值时 父组件给的值
    };
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
  }

  componentDidUpdate(preProps, preState) {
    if (JSON.stringify(preProps.initialValue) !== JSON.stringify(this.props.initialValue)) {
      // console.log('初始化值 延迟加载');
      this.setState(
        {
          productId: this.props.initialValue ? this.props.initialValue[0] : undefined, // 当前选择的产品ID
        },
        () => {
          // 设置组合
          this.state.ProductGroupTreeC.setSelect(this.props.initialValue ? this.props.initialValue[1] : undefined, true);
        },
      );
    }
  }

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value) => {
    // 设置产品
    this.state.ProductListC.setSelect(value && value[0]);
    // 设置组合
    setTimeout(() => {
      this.state.ProductGroupTreeC.setSelect(value && value[1]);
    }, 300);
  };

  // 切换产品下拉响应事件
  productOnChange = (e, changeType) => {
    // 清空组合选项
    if (!changeType) this.state.ProductGroupTreeC.setSelect(undefined);
    if (e) {
      // 设置当前选择的产品
      this.setState({
        productId: e.key,
      });
    } else {
      this.setState({
        productId: undefined,
      });
    }
    // 对外抛出事件
    this.props.productOnChange(e);
  };

  // 重置时清空productId和组合下拉数据
  resetChange = () => {
    this.setState({
      productId: undefined,
    });
  };

  render() {
    const {
      labalWrap,
      labelWrapTwo,
      spanCol,
      form,
      title,
      dataIndex,
      initialValue,
      placeholder,
      helper,
      width,
      groupOnChange,
      multipleGroup,
      rules,
      formItemLayout,
      allowClear,
      authority,
      disabled,
      direction,
      maatApi,
      exist,
      positionBody,
      tradeModel,
      workStation,
      initChangeFlag,
    } = this.props;

    return (
      <Row style={{ width }}>
        <Col span={direction === 'row' ? (spanCol ? spanCol : 12) : 24}>
          <ProductListC
            labalWrap={labalWrap}
            form={form}
            helper={helper && helper[0]}
            dataIndex={dataIndex && dataIndex[0]}
            title={title && title[0]}
            initialValue={initialValue && initialValue[0]}
            placeholder={placeholder && placeholder[0]}
            onChange={this.productOnChange}
            initChangeFlag={initChangeFlag}
            rules={rules[0]}
            onRef={(ref) => this.setState({ ProductListC: ref })}
            formItemLayout={formItemLayout}
            allowClear={allowClear}
            disabled={workStation ? true : disabled}
            maatApi={maatApi}
            exist={exist}
            positionBody={positionBody}
            tradeModel={tradeModel}
          />
        </Col>
        <Col span={direction === 'row' ? (spanCol ? spanCol : 12) : 24}>
          <ProductGroupTreeC
            labalWrap={labelWrapTwo}
            form={form}
            initChangeFlag={initChangeFlag}
            helper={helper && helper[1]}
            dataIndex={dataIndex && dataIndex[1]}
            dataIndex0={dataIndex && dataIndex[0]}
            title={title && title[1]}
            initialValue={initialValue && initialValue[1]}
            placeholder={placeholder && placeholder[1]}
            onChange={(e) => groupOnChange(e)}
            rules={rules[1]}
            ralation={true}
            productId={this.state.productId}
            multiple={multipleGroup}
            onRef={(ref) => this.setState({ ProductGroupTreeC: ref })}
            formItemLayout={formItemLayout}
            allowClear={allowClear}
            authority={authority}
            disabled={disabled}
            maatApi={maatApi}
            resetChange={this.resetChange}
            tradeModel={tradeModel}
          />
        </Col>
      </Row>
    );
  }
}

// props类型
ProductGroupSepC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.array, // 显示名称
  dataIndex: PropTypes.array, // Form识别的Item ID
  initialValue: PropTypes.array, // 初始默认值([产品初始化值，组合初始化值])
  placeholder: PropTypes.array, // 占位符
  helper: PropTypes.array, // 提示帮助信息
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  multipleGroup: PropTypes.bool, // 是否支持组合多选
  rules: PropTypes.array, // 校验规则
  formItemLayout: PropTypes.object, // 设置表单布局
  allowClear: PropTypes.bool, // 设置是否可删除
  authority: PropTypes.oneOf(['read', 'write']), // 设置权限类型
  disabled: PropTypes.bool, // 是否禁用
  direction: PropTypes.string, // 布局（row-横向 column-纵向）
  maatApi: PropTypes.bool, // 正常情况下，在哪个环境下，就访问哪个环境的产品和组合，
  // 但在投资建议书模块中，被引用到资管环境时，该组件的接口仍然要访问maat环境中的产品和组合（而不是资管环境中产品），此时需要在接口前添加maat前缀
  exist: PropTypes.number, // 如果传参数1，获取存续产品，不包含过期产品，不传参获取存续产品和过期产品
  tradeModel: PropTypes.array, // 交易模式  BOOKKEEPING_MODE: "簿记模式"，  COMMAND_MODE: "指令模式"，VALUATION_BOOKKEEPING_MODEL: "估值系统对接模式"，VALUATION_TABLE_ANALYSIS_MODE: "估值表解析模式"
  workStation: PropTypes.bool, // 是否工作台调用
  initChangeFlag: PropTypes.bool, // 初次是否抛出onchange事件 默认false (首次在非标工作台添加交易中使用)
};

export default connect(({ productAGroupM, loading }) => ({ productAGroupM, loading }))(ProductGroupSepC);
